<template>
  <!-- 引用组件：级联选择器(单选) -->
  <div class="LSelect_root" :style="`width: ${width}px`">
    <span class="label">{{ label }}</span>
    <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" clearable filterable @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
export default {
  name: "LSelect",

  props: {
    value: {
      type: String,
      default: "",
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    label: {
      type: String,
      default: "地区",
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    width: {
      type: Number,
      default: 400,
    },
  },

  data() {
    return {
      // value: "",
      // options: [
      //   {
      //     value: "1",
      //     label: "",
      //   },
      // ],
    };
  },
  methods: {
    handleChange() {
      this.$emit("cascader-event", this.value);
    },
  },
};
</script>
<style lang="less" scoped>
.LSelect_root {
  height: 40px;
  background-image: url("../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}

/deep/.el-cascader .el-input .el-input__inner {
  background-color: transparent;
  // width: 120px;
}

/deep/ .el-cascader {
  width: 300px;
}
</style>
